/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-05-18 10:37:50
 * @LastEditors: cuidm
 * @LastEditTime: 2022-06-23 17:23:27
 */
export const G6ToolBar = function (G6, toolBarHandles = {}) {
  return new G6.ToolBar({
    getContent () {
      /* 这里必须是 ul li */
      return `
        <ul class="g6-component-toolbar">
          <li class="t-iconfont icon-zoom-in" code="zoomIn" title="放大"></li>
          <li class="t-iconfont icon-zoom-out" code="zoomOut" title="缩小"></li>
          <li class="t-iconfont icon-1x" code="defaultSize" title="1倍大小"></li>
          <li class="t-iconfont icon-reset" code="relocation" title="重定位"></li>
          <li class="iconfont icon-liudongshu" code="mindmap" title="子节点左右分布"></li>
          <li class="iconfont icon-tuoputu" code="dendrogram" title="子节点上下分布"></li>
          <li class="t-iconfont icon-why" code="graphHelp" title="帮助"></li>
      </ul>
    `;
    },
    handleClick (code) {
      if(typeof toolBarHandles[code] == "function")
      toolBarHandles[code]();
    },
  });
};

export const G6Menu = function (G6,handles = {}) {
  return new G6.Menu({
    offsetX: 20,
    offsetY: -10,
    className: "g6-component-contextmenu-reset",
    shouldBegin (e) {
      const model = e.item && e.item.getModel()
      if (model && model.graphType) {
        return true
      } else {
        return false;
      };
    },
    getContent (e) {
      // 节点
      let menus = '<div class="box">';
      // 右键菜单命令
      const commands = [
        {
          command: 'queryDetail',
          name:    '查看详情',
        },
        {
          command: 'queryMonitor',
          name:    '查看监控',
        },
        {
          command: 'queryAlarm',
          name:    '查看告警',
        },
      ];
      commands.forEach(item => {
        menus += `<p class="menu-item" command="${item.command}">${item.name}</p>`;
      });
      menus += `</div>`;
      return menus;
    },
    handleMenuClick (target, item) {
      const command = target.getAttribute('command');
      if(typeof handles[command] == "function")
          handles[command](item);
    },
  });
};

export const G6Tooltip = function (G6) {
  return new G6.Tooltip({
    offsetX: 10,
    offsetY: 20,
    getContent(e) {
        const model = e.item.getModel();
        const outDiv = document.createElement('div');
        outDiv.style.width = '150px';
        outDiv.innerHTML = `<div class="resource-tooltip">`;
          if(model.graphType === 'phy_server') {
            outDiv.innerHTML += `<p>节点类型：${model.facilityType||'-'} </p>`;
          }
          outDiv.innerHTML += `<p style="margin-bottom: 0;">节点名称：${model.label||'-'} </p></div>`;
        return outDiv;
    },
    itemTypes: ['node']
  })
};
